<template>
    <div class="container">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Input v-model="searchObj.stock_id" class="search-input" clearable placeholder="请输入优惠券批次号"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.mobile" class="search-input" clearable placeholder="请输入手机号"/>
                </FormItem>
                <FormItem>
                    <Select v-model="searchObj.status" placeholder="请选择状态" clearable filterable style="width: 200px">
                        <Option value="YES">已领取</Option>
                        <Option value="NO">未领取</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="warning" @click="addAction">
                        <Icon type="ios-add"/>
                        添加
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-table
                    ref="xTable"
                    border
                    resizable
                    highlight-hover-row
                    size="medium"
                    :loading="tableLoading"
                    align="center"
                    header-align="center"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData">
                <vxe-table-column type="seq" title="编号" width="60"></vxe-table-column>
                <vxe-table-column field="openid" title="openid" min-width="120"></vxe-table-column>
                <vxe-table-column field="stock_id" title="优惠券批次号" min-width="120"></vxe-table-column>
                <vxe-table-column field="coupon_id" title="优惠券编号" min-width="120"></vxe-table-column>
                <vxe-table-column field="member_id" title="会员id" min-width="120"></vxe-table-column>
                <vxe-table-column field="mobile" title="手机号" min-width="120"></vxe-table-column>
                <vxe-table-column field="status" title="使用状态" min-width="120">
                    <template v-slot="{row}">
                        <span v-if="row.status == 'YES'">已使用</span>
                        <span v-if="row.status == 'NO'">未使用</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="create_date" title="创建时间" min-width="120"></vxe-table-column>
                <vxe-table-column field="verification_date" title="核销时间" min-width="120"></vxe-table-column>
                <vxe-table-column field="action" title="操作" fixed="right" width="200">
                    <template v-slot="{row}">
                        <ButtonGroup class="action-btn">
                            <Button type="success" size="small" @click="editAction(row)">
                                <Icon type="ios-create-outline"/>
                                修改
                            </Button>
                            <Button type="error" size="small" @click="delBtn(row.id)">
                                <Icon type="md-close"/>
                                删除
                            </Button>
                        </ButtonGroup>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize"
                  :total="pageObj.totalRecord"
                  @on-change="getPageNo" :page-size-opts="[10,20,50,100]" @on-page-size-change="pageSizeChange"/>
        </Row>
       <!-- <option-modal :modalShow="modalShow" :modalType="modalType" :modalTitle="modalTitle" :dataObj="modalData"
                      @cancel="cancelOption" @saveOption="saveOption"></option-modal>-->
    </div>
</template>

<script>
import { findRecordList } from '@/api/shop'
export default {
  data () {
    return {
      searchObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      tableLoading: false,
      tableData: []
    }
  },
  methods: {
    getList () {
      const param = {
        pageSize: this.pageObj.pageSize,
        pageNo: this.pageObj.pageNo
      }
      findRecordList(param).then(ret => {
        console.log(ret, '接口数据')
      })
    },
    addAction () {},
    editAction () {},
    delBtn () {},
    searchAction () {},
    pageSizeChange () {},
    getPageNo () {}
  },
  mounted () {
    this.getList()
  }
}
</script>

<style scoped>

</style>
